<template>
  <v-card class="border" rounded="lg" variant="flat">
    <v-card-title class="text-h5 mb-4">
      <v-icon class="mr-2" icon="mdi-account" />
      My Profile
    </v-card-title>

    <v-card-text>
      <v-row>
        <v-col cols="12" md="4">
          <v-card class="text-center pa-4" rounded="lg" variant="outlined">
            <v-avatar class="my-4" size="150">
              <v-img
                :alt="user.name"
                cover
                :src="user.avatar"
              />
            </v-avatar>
            <v-file-input
              v-model="avatarFile"
              accept="image/*"
              density="compact"
              hide-details
              label="Change Avatar"
              prepend-icon="mdi-camera"
              variant="outlined"
              @change="onAvatarChange"
            />
            <v-divider class="my-4" />
            <div class="text-subtitle-1">{{ user.name }}</div>
            <div class="text-caption text-medium-emphasis">{{ user.role }}</div>
            <div class="text-caption text-medium-emphasis">{{ user.email }}</div>
            <div class="text-caption text-medium-emphasis">
              Member since {{ formatDate(user.joinDate) }}
            </div>
          </v-card>

          <v-card class="mt-4 border" rounded="lg" variant="flat">
            <v-card-title class="text-subtitle-1">
              <v-icon class="mr-2" icon="mdi-shield-account" size="small" />
              Account Security
            </v-card-title>
            <v-card-text>
              <v-list class="pa-0" density="compact">
                <v-list-item>
                  <template #prepend>
                    <v-icon icon="mdi-lock" />
                  </template>
                  <v-list-item-title>Change Password</v-list-item-title>
                  <template #append>
                    <v-btn
                      size="small"
                      variant="flat"
                      @click="changePassword"
                    >
                      Change
                    </v-btn>
                  </template>
                </v-list-item>
                <v-list-item>
                  <template #prepend>
                    <v-icon icon="mdi-two-factor-authentication" />
                  </template>
                  <v-list-item-title>Two-Factor Authentication</v-list-item-title>
                  <template #append>
                    <v-switch
                      v-model="twoFactorEnabled"
                      color="primary"
                      density="compact"
                      hide-details
                      @change="toggleTwoFactor"
                    />
                  </template>
                </v-list-item>
              </v-list>
            </v-card-text>
          </v-card>
        </v-col>

        <v-col cols="12" md="8">
          <v-card class="mb-4 border" rounded="lg" variant="flat">
            <v-card-title class="text-subtitle-1">
              <v-icon class="mr-2" icon="mdi-account-edit" size="small" />
              Personal Information
            </v-card-title>
            <v-card-text>
              <v-form @submit.prevent="saveProfile">
                <v-row>
                  <v-col cols="12" md="6">
                    <v-text-field
                      v-model="formData.firstName"
                      density="comfortable"
                      label="First Name"
                      variant="outlined"
                    />
                  </v-col>
                  <v-col cols="12" md="6">
                    <v-text-field
                      v-model="formData.lastName"
                      density="comfortable"
                      label="Last Name"
                      variant="outlined"
                    />
                  </v-col>
                  <v-col cols="12">
                    <v-text-field
                      v-model="formData.email"
                      density="comfortable"
                      label="Email"
                      type="email"
                      variant="outlined"
                    />
                  </v-col>
                  <v-col cols="12" md="6">
                    <v-text-field
                      v-model="formData.phone"
                      density="comfortable"
                      label="Phone Number"
                      variant="outlined"
                    />
                  </v-col>
                  <v-col cols="12" md="6">
                    <v-select
                      v-model="formData.timezone"
                      density="comfortable"
                      :items="timezones"
                      label="Timezone"
                      variant="outlined"
                    />
                  </v-col>
                  <v-col cols="12">
                    <v-textarea
                      v-model="formData.bio"
                      auto-grow
                      label="Bio"
                      rows="3"
                      variant="outlined"
                    />
                  </v-col>
                  <v-col class="d-flex justify-end" cols="12">
                    <v-btn
                      color="primary"
                      :loading="isSaving"
                      type="submit"
                      variant="flat"
                    >
                      Save Changes
                    </v-btn>
                  </v-col>
                </v-row>
              </v-form>
            </v-card-text>
          </v-card>

          <v-card class="border" rounded="lg" variant="flat">
            <v-card-title class="text-subtitle-1">
              <v-icon class="mr-2" icon="mdi-cog" size="small" />
              Preferences
            </v-card-title>
            <v-card-text>
              <v-form @submit.prevent="savePreferences">
                <v-row>
                  <v-col cols="12" md="6">
                    <v-select
                      v-model="preferences.language"
                      density="comfortable"
                      :items="languages"
                      label="Language"
                      variant="outlined"
                    />
                  </v-col>
                  <v-col cols="12" md="6">
                    <v-select
                      v-model="preferences.theme"
                      density="comfortable"
                      :items="themes"
                      label="Theme"
                      variant="outlined"
                    />
                  </v-col>
                  <v-col cols="12">
                    <v-checkbox
                      v-model="preferences.emailNotifications"
                      hide-details
                      label="Email Notifications"
                    />
                    <v-checkbox
                      v-model="preferences.pushNotifications"
                      hide-details
                      label="Push Notifications"
                    />
                    <v-checkbox
                      v-model="preferences.weeklyReport"
                      hide-details
                      label="Weekly Report"
                    />
                  </v-col>
                  <v-col class="d-flex justify-end" cols="12">
                    <v-btn
                      color="primary"
                      :loading="isSavingPreferences"
                      type="submit"
                      variant="flat"
                    >
                      Save Preferences
                    </v-btn>
                  </v-col>
                </v-row>
              </v-form>
            </v-card-text>
          </v-card>
        </v-col>
      </v-row>
    </v-card-text>
  </v-card>
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  // User data
  const user = ref({
    name: 'John Doe',
    email: 'john.doe@example.com',
    role: 'Administrator',
    avatar: 'https://randomuser.me/api/portraits/men/1.jpg',
    joinDate: '2023-01-15',
    phone: '+1 (555) 123-4567',
    bio: 'Full-stack developer with a passion for creating beautiful and functional web applications.',
  })

  // Form data
  const formData = ref({
    firstName: 'John',
    lastName: 'Doe',
    email: user.value.email,
    phone: user.value.phone,
    timezone: 'America/New_York',
    bio: user.value.bio,
  })

  // Preferences
  const preferences = ref({
    language: 'en',
    theme: 'system',
    emailNotifications: true,
    pushNotifications: true,
    weeklyReport: false,
  })

  // UI states
  const isSaving = ref(false)
  const isSavingPreferences = ref(false)
  const twoFactorEnabled = ref(true)
  const avatarFile = ref()

  // Select options
  const timezones = [
    'America/New_York',
    'America/Chicago',
    'America/Denver',
    'America/Los_Angeles',
    'UTC',
    'Europe/London',
    'Europe/Paris',
    'Asia/Tokyo',
    'Asia/Shanghai',
    'Australia/Sydney',
  ]

  const languages = [
    { title: 'English', value: 'en' },
    { title: '中文', value: 'zh' },
    { title: 'Español', value: 'es' },
    { title: 'Français', value: 'fr' },
    { title: 'Deutsch', value: 'de' },
    { title: '日本語', value: 'ja' },
  ]

  const themes = [
    { title: 'System', value: 'system' },
    { title: 'Light', value: 'light' },
    { title: 'Dark', value: 'dark' },
  ]
  // Methods
  function formatDate (dateString: string) {
    const options: Intl.DateTimeFormatOptions = {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
    }
    return new Date(dateString).toLocaleDateString(undefined, options)
  }

  function onAvatarChange () {
    if (avatarFile.value) {
      const reader = new FileReader()
      reader.addEventListener('load', e => {
        user.value.avatar = e.target?.result as string
      })
      reader.readAsDataURL(avatarFile.value[0])
    }
  }

  function saveProfile () {
    isSaving.value = true
    // Simulate API call
    setTimeout(() => {
      user.value.name = `${formData.value.firstName} ${formData.value.lastName}`
      user.value.email = formData.value.email
      user.value.phone = formData.value.phone
      user.value.bio = formData.value.bio

      // Show success message
      // You can use a toast/snackbar component here
      console.log('Profile updated successfully')
      isSaving.value = false
    }, 1000)
  }

  function savePreferences () {
    isSavingPreferences.value = true
    // Simulate API call
    setTimeout(() => {
      // Show success message
      console.log('Preferences updated successfully')
      isSavingPreferences.value = false
    }, 1000)
  }

  function changePassword () {
    // Implement password change logic
    console.log('Change password clicked')
  // Show change password dialog
  }

  function toggleTwoFactor () {
    // Implement two-factor toggle logic
    console.log('Two-factor authentication:', twoFactorEnabled.value ? 'enabled' : 'disabled')
  // Show confirmation dialog
  }
</script>

<style scoped>
.v-avatar {
  border: 3px solid rgb(var(--v-theme-primary));
}

.v-card {
  border-radius: 8px;
}

.v-card-title {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  padding: 16px;
}

.v-card-text {
  padding: 16px;
}
</style>

<route lang="json">
{
  "meta": {
    "layout": "default"
  }
}
</route>
